{extend name="public:base" /}
{block name="content"}
<link rel="stylesheet" href="__PUBLIC__/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="__PUBLIC__/bootstrap-3.3.7-dist/css/img.css">
<div class="page-header">
    <h1>
        {$breadcrumb1}
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            {$breadcrumb2}
        </small>
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            {$crumbs}
        </small>

    </h1>
</div>

<div class="row">
    <div class="col-xs-12">

        <div class="form-horizontal">
        	<form action="{:url('Article/add')}" method="post" enctype="multipart/form-data" id="form-goods" class="form-horizontal">
	            
	            <div class="form-group">
	                <label class="col-sm-1 control-label no-padding-left"> * 标题 </label>

	                <div class="col-sm-11">
	                    <div class="clearfix">
	                        <input name="title" id="title" class="col-xs-10 col-sm-6" value="{$info.title}"
	                               type="text">
	                    </div>
	                </div>
	            </div>

	            <div class="form-group">
	                <label class="col-sm-1 control-label no-padding-left"> * 公告图片</label>

	                <div class="col-sm-11">
	                    <div class="clearfix">
                            <div class="img_wrap" style="margin-top: 50px;">
                                {volist name="img" id="img"}
                                    <div class="pic_wrap" id=" showPic1">
                                        <img src="{$img.img_path}" class="img image img-rounded">
                                    </div>
                                {/volist}
                            </div>
	                    </div>
	                </div>
	            </div>

	            <div class="form-group">
	                <label class="col-sm-1 control-label no-padding-left"> </label>

	                <div class="col-sm-11">
	                    <input id="send" type="submit" value="提交" style="margin:0" class="btn btn-primary"/>
	                </div>
	            </div>
	        </form>
        </div>
    </div>
</div>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
</div>
{/block}
{block name="javascript"}
<script src="__PUBLIC__/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
    //图片预览
    $('.image').click(function(){
        var _this = $(this);                            //将当前的pimg元素作为_this传入函数
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);

    });
    function imgShow(outerdiv, innerdiv, bigimg, _this) {
        var src = _this.attr("src");                    //获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);                     //设置#bigimg元素的src属性

        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function () {
            var windowW = $(window).width();            //获取当前窗口宽度
            var windowH = $(window).height();           //获取当前窗口高度
            var realWidth = this.width;                 //获取图片真实宽度
            var realHeight = this.height;               //获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.8;                            //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if (realHeight > windowH * scale) {         //判断图片高度
                imgHeight = windowH * scale;            //如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight / realHeight * realWidth;      //等比例缩放宽度
                if (imgWidth > windowW * scale) {                   //如宽度扔大于窗口宽度
                    imgWidth = windowW * scale;                     //再对宽度进行缩放
                }
            } else if (realWidth > windowW * scale) {               //如图片高度合适，判断图片宽度
                imgWidth = windowW * scale;                         //如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth / realWidth * realHeight;      //等比例缩放高度
            } else {                                    //如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width", imgWidth);           //以最终的宽度对图片缩放

            var w = (windowW - imgWidth) / 2;           //计算图片与窗口左边距
            var h = (windowH - imgHeight) / 2;          //计算图片与窗口上边距
            $(innerdiv).css({"top": h, "left": w});     //设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");                 //淡入显示#outerdiv及.pimg
        });
        $('#outerdiv').click(function () {              //再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }
</script>
{/block}